* {
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

.wavy {
    position: relative;
    -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2));

    span {
        position: relative;
        display: inline-block;
        color: #fff;
        font-size: 50px;
        text-transform: uppercase;
        letter-spacing: 8px;
        animation: wavyAnimate 1s ease-in-out infinite;
        @for $i from 1 to 11 {
            &:nth-child(#{$i}) {
                animation-delay: 0.1s * $i;
            }
        }
    }
}

@keyframes wavyAnimate {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-40px);
    }
    40%,
    100% {
        transform: translateY(0);
    }
}
